<template>
    <div class="demo">
        <div class="panel">
            <div class="panel-head">
                <div class="panel-head-l">选择地点获取经纬度</div>
            </div>
            <div class="panel-body">
                <el-tag class="demo-tag">type地图类型: add-新增 edit-修改 view-查看</el-tag><br />
                <el-tag class="demo-tag">fSetLocation(lng,lat)设置地图定位经纬度: lng-经度 lat-纬度</el-tag><br />
                <el-row>
                    <el-col :span="12">
                        <el-tag class="demo-tag">add-新增</el-tag>
                        <div class="demo-map-box">
                            <comp-map-location ref="mapadd"
                                               type="add"
                                               @location-change="fLoactionChange"></comp-map-location>
                        </div>
                        <el-tag class="demo-tag">经度：{{oPosition.lng}}</el-tag>
                        <el-tag class="demo-tag">纬度：{{oPosition.lat}}</el-tag>
                    </el-col>
                    <el-col :span="12">
                        <el-tag class="demo-tag">view-查看</el-tag>
                        <div class="demo-map-box">
                            <comp-map-location ref="mapview"
                                               type="view"></comp-map-location>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import CompMapLocation from '@/components/project/map.vue';
    export default {
        components: {
            CompMapLocation
        },
        data() {
            return {
                oPosition: {}
            };
        },
        mounted() {
            this.$refs.mapview.fSetLocation(119.74755500793458, 31.365895385742192)
        },
        methods: {
            fLoactionChange(oPos) {
                this.oPosition = { ...oPos }
            }
        }
    };
</script>

<style lang="less" rel="stylesheet" scoped>
    .demo-map-box {
        width: 100%;
        height: 500px;
    }
</style>